<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0' }">
        <BreadcrumbItem>商品管理</BreadcrumbItem>
        <BreadcrumbItem>商品分组</BreadcrumbItem>
      <Button type="primary" style="float:right" @click="btnAdd">新增分组</Button>
    </Breadcrumb>
    <Content class="layer-content">
      <Table border :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="init"></HigPager>
    </Content>
    <Modal v-model="showCreate" :footer-hide="true" title="新增分组" width="60%">
      <CreateVue ref="refStoreCreate" :callbank="eventAction"></CreateVue>
    </Modal>
    <Modal v-model="showUpdate" :footer-hide="true" title="编辑分组" width="60%">
      <UpdateVue ref="refStoreUpdate" :callbank="eventAction"></UpdateVue>
    </Modal>
  </div>
</template>
<script>
import UpdateVue from './update.vue'
import CreateVue from './create.vue'
export default {
  name: "purchase",
  data() {
    return {
      showCreate: false,
      showUpdate: false,
      dataGrid: [],
      pageTotal: 0,
      query: {
        equal: {
          appCode: 'agromall'
        },
        pageIndex: 1,
        pageSize: 15
      },
      columns: [
        {
          title: "分组名称",
          key: "groupName",
        },
        {
          title: "分组ID",
          key: "groupId",
        },
        {
          title: "分组编码",
          key: "groupCode",
          width: 150
        },
        {
          title: "排序",
          key: "sortIndex",
          sortable: true,
          width: 100
        },
        {
          title: "开启状态",
          key: "groupStatus",
          width: 100,
          render: (h, params) => {
            return h("div", [h("Tag",{props:{color: params.row.groupStatus === 0 ? 'default' : 'success'}},(params.row.groupStatus === 0 ? '关闭' : '开启'))]);
          },
        },
        {
          title: "创建日期",
          key: "postTime",
          width: 160,
          render: (h, params) => {
            return h("div", [h("span", this.$date(params.row.postTime,'yyyy-MM-dd'))]);
          },
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.btnEdit(params.row);
                    },
                  },
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "default",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.btnDel(params.row);
                    },
                  },
                  style: {
                    marginLeft: "10px",
                  }
                },
                "删除"
              )
            ])
          },
        }
      ]
    }
  },
  created() {
    this.init()
  },
  components:{
    UpdateVue,
    CreateVue
  },
  methods: {
    eventAction() {
      this.showCreate = false
      this.showUpdate = false
      this.init()
    },
    btnAdd() {
      this.showCreate = true
    },
    btnEdit(item) {
      this.showUpdate = true
      this.$refs.refStoreUpdate.Init(item.groupId)
    },
    init(){
      new this.$rest({
        gateway: 'agroerp',
        service: 'agroerp-mall',
        url: '/v1.0/goods/group/page',
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data
            this.pageTotal = data.count
            this.dataGrid = data.list
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: res.data.msg
            })
          }
        }
      }).get()
    },
      
    /** 删除按钮操作 */
    btnDel(row) {
      this.$Modal.confirm({
        title: '操作提示',
        content: '确定删除吗？',
        onOk: () => {
          new this.$rest({
            gateway: 'agroerp',
            service: 'agroerp-mall',
            url: '/v1.0/goods/group',
            data: {
              pojo: [row.groupId]
            },
            action: (res) => {
              if (res.data.code === 20000) {
                this.$Message.success({
                  content: '删除成功',
                  duration: 1,
                  onClose: ()=> {
                    this.init()
                  }
                })
              } else {
                this.$Message.error(res.data.msg)
              }
            }
          }).delete()
        }
      })
    },
  }
}
</script>